<section [formGroup]="sshKeyForm" class="tw-mb-5 bit-compact:tw-mb-4">
  <bit-section-header>
    <h2 bitTypography="h6">
      {{ "typeSshKey" | i18n }}
    </h2>
  </bit-section-header>
  <bit-card>
    <bit-form-field>
      <bit-label>{{ "sshPrivateKey" | i18n }}</bit-label>
      <input id="privateKey" bitInput formControlName="privateKey" type="password" />
      <button
        type="button"
        bitIconButton
        bitSuffix
        data-testid="toggle-privateKey-visibility"
        bitPasswordInputToggle
      ></button>
      <button
        type="button"
        bitIconButton="bwi-import"
        bitSuffix
        data-testid="import-privateKey"
        *ngIf="showImport"
        appA11yTitle="{{ 'importSshKeyFromClipboard' | i18n }}"
        (click)="importSshKeyFromClipboard()"
      ></button>
    </bit-form-field>

    <bit-form-field>
      <bit-label>{{ "sshPublicKey" | i18n }}</bit-label>
      <input id="publicKey" bitInput formControlName="publicKey" />
    </bit-form-field>

    <bit-form-field>
      <bit-label>{{ "sshFingerprint" | i18n }}</bit-label>
      <input id="keyFingerprint" bitInput formControlName="keyFingerprint" />
    </bit-form-field>
  </bit-card>
</section>
